<template>
  <div style="width:100%;height:100%;background-color: #fff;display: flex;position: relative;flex-direction: column;">

    
    <div style="flex:1;width: 100%;"></div>
    <div style="width: 100%;height: 468px;display: flex;align-items: flex-end;">
      <img src="/static/images/leftimg.png" alt="" style="width: 394px;height: 468px;flex-shrink: 0;">
      <div style="flex-grow: 1;"></div>
      <img src="/static/images/rightimg.png" alt="" style="width: 487px;height: 412px;flex-shrink: 0;justify-content: flex-end;">
    </div>

    <div style="width:100%;height:100%;position:absolute;left:0;top:0;display: flex;justify-content: center;align-items: center;">
      <div style="width:1000px;box-shadow: 0 0 25px #cac6c6;display:flex;background-color: #fff;">
        
        <div class="leftbox">
          
          <img style="width: 600px;height: calc(845*724/600)px;" src="../../public/static/images/leftpic.png" alt="">
          
        </div>


        <div style="width:400px;flex-shrink: 0;">
          <div style="padding: 0 60px;display: flex;flex-direction: column;height:100%;justify-content: center;">
            <el-form ref="form" class="loginitems" label-width="0" @submit.prevent>
              <div style="width:100%;height:50px;font-weight: bold;display: flex;">
                <div style="font-size: 26px;height: 50px;display: flex;align-items: flex-end;">用户登录</div>
                <div style="flex: 1;"></div>
                <div @click="registAccount" style="color:#409EFF;font-size:16px;cursor: pointer;height: 50px;display: flex;align-items: flex-end;">注册企业账号</div>
              </div>
              <el-form-item label="">
                <div style="display: flex;width:100%;height: 40px;align-items: center;">
                  <div class="labelCss">
                    账号
                  </div>
                  <el-input
                    style="flex: 1;height: 40px;"
                    placeholder="请输入账号"
                    v-model="login.username"
                    :prefix-icon="'User'"
                    autocomplete="off">
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="" style="">
                <div style="display: flex;width:100%;height: 40px;align-items: center;">
                  <div class="labelCss">
                    密码
                  </div>
                  <el-input
                    type="password"
                    style="flex: 1;height: 40px;"
                    placeholder="请输入密码"
                    v-model="login.password"
                    :prefix-icon="'Lock'"
                    autocomplete="new-password">
                  </el-input>
                </div>
              </el-form-item>

              <div style="display: flex;align-items: center;justify-content: center;">
                <el-checkbox v-model="isremember" label="记住我" size="large" />
              </div>

              <input style="display:none;" type="submit" @click.stop="loading"/>

              <div class="submitcss">
                <el-button-group style="width:100%;">
                  <el-button type="primary" @click="loading" :loading="isok" size="default" style="height:40px;width: 100%;">登录</el-button>

                </el-button-group>
                
              </div>
              <div style="width:100%;text-align: center;color:#409EFF;font-size:14px;margin-top:20px;">
                <!-- 已有账号，忘记密码？ -->
              </div>
            </el-form>
            
          </div>

        </div>

      </div>


      <div style="position: absolute;left:0;right: 0;margin: 0 auto;bottom: 30px;">
        <div style="display: flex;justify-content: center;align-items: center;font-size: 14px;">
          <a style="text-decoration: none;color: black;" target="_blank" href="https://beian.miit.gov.cn/">宁波天斗信息科技有限公司 版权所有 浙ICP备2023005935号</a>
        </div>
      </div>


    </div>

    
    <!-- =================================== 弹出层 ================================ -->
    <el-dialog custom-class="diyDialog" class="diyDialog" 
    v-model="openStoreDialog" :before-close="(done) => beforeClose(done)" 
    destroy-on-close
    :title="'列表详情'" width="1050px">
    
      <div class="contentbox_border border" :style="'overflow-y: auto;'">
        <store-detail ref="data_detail" @close-dialog="clickClose"></store-detail>
			</div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="childDataOperation()">保存</el-button>
          <el-button @click="clickClose()">关闭</el-button>
        </div>
      </template>

    </el-dialog>

  </div>
</template>

<script setup>
  import StoreDetail from '@/views/admin/y_system/store/detail.vue'
  import { reactive, ref, onMounted, inject, nextTick } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  const router = useRouter()
  const store = useStore()
  const $utils = inject('$utils')
  // console.log(proxy.$utils)
  const login = reactive({
    username: '',
    password: ''
  })
  const isok = ref(false)
  const isremember = ref(false)

  const openStoreDialog = ref(false)
  const data_detail = ref()

  const onMountedHook = function () {
    // 是否开启记住我
    const rememberFlag = $utils.cookies.get('isremember')
    if (!rememberFlag) {
      login.username = ''
      login.password = ''
      isremember.value = false
    } else {
      login.username = $utils.cookies.get('username')
      login.password = $utils.cookies.get('password')
      isremember.value = true
    }
    console.log(store.state.dialog_body_height)
  }

  function loading() {
    if (isremember) {
      $utils.cookies.set('username', login.username)
      $utils.cookies.set('password', login.password)
      $utils.cookies.set('code', login.code)
      $utils.cookies.set('isremember', true)
    } else {
      $utils.cookies.set('username', '')
      $utils.cookies.set('password', '')
      $utils.cookies.set('code', '')
      $utils.cookies.set('isremember', false)
    }
    // 测试用哒
    // $utils.cookies.set('username', 'username')
    // router.push({path: '/admin'})
    $utils.post({
      url: '/Api/Login/GetJwtToken',
      params: login,
      showLoading: true,
      ok: function (res) {
        $utils.cookies.set('token', (res.data.token.token_type + ' ' + res.data.token.token))
        $utils.cookies.set('nickName', res.data.nickName)
        $utils.cookies.set('companyName', res.data.companyName)
        $utils.cookies.set('erpBasePath', res.data.eRPBasePath)
        $utils.cookies.set('erpOrderPath', res.data.erpOrderPath)
        $utils.cookies.set('erpPath', res.data.erpPath)
        $utils.cookies.set('isErp', JSON.stringify(res.data.isErp))
        router.push({path: '/admin'})
      }
    })
  }

  function beforeClose(done, flag) {
    if (flag || store.state.close_showtip) {
      $utils.showCloseTip(function () {
        done()
      })
    } else {
      done()
    }
  }
  function clickClose() {
    openStoreDialog.value = false
  }
  // 新增页面
  async function registAccount() {
    console.log('register')
    openStoreDialog.value = true
    await nextTick()
    data_detail.value.initData({
      data: {
        registerSource: 1
      }
    })
    // that.$refs['detail'].initData()
  }

  onMounted(() => {
    onMountedHook()
  })
</script>

<style scoped>
.labelCss {
  flex-shrink: 0;
  font-weight: bold;
  font-size: 16px;
  margin-right: 15px;
}
.loginbox{
  box-shadow: 0 0 25px #cac6c6;
  position: absolute;
  margin:100px auto;
  width:300px;
  height:260px;
  border:1px solid #eaeaea;
  border-radius: 5px;
}
.loginitems{
  /* width: 265px; */
  width: 100%;
  margin:auto;
}
.loginimgbox{
  margin:50px auto 30px;
  width: 100px;
  height:100px;
}
.submitcss{
  text-align: center;
  margin-top:10px;
}
.loginimg{
  width: 100%;
  height:100%;
}
.logintext{
  position:absolute;
  left: 10px;
  top:10px;
}
.el-form-item{
  margin:0;
  margin-top:20px;
}

.leftbox {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;

}
</style>
